/* 
  1. 图书列表的展示
    1.1 根据接口文档，发送ajax请求，获取到图书的数据
    1.2 动态渲染到table中
  2. 图书的删除功能
  3. 图书的添加功能
*/

// 1. 发送请求，获取图书数据
function render() {
  const xhr = new XMLHttpRequest()
  xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
  xhr.send(null)

  xhr.onload = function () {
    // 获取图书的结果 json格式
    // console.log(xhr.responseText)
    const res = JSON.parse(xhr.responseText)
    if (res.status !== 200) {
      return alert('请求失败,请稍后重试')
    }
    // 动态渲染结构
    let html = ''
    res.data.forEach((item, index) => {
      // console.log(item)
      html += `
        <tr>
            <td>${index + 1}</td>
            <td>${item.bookname}</td>
            <td>${item.author}</td>
            <td>${item.publisher}</td>
            <td><a href="javascript:;" data-id="${
              item.id
            }" class="btn btn-danger delete">删 除</a></td>
        </tr>
      `
    })
    $('#tb').html(html)
  }
}

render()

// 2. 图书的添加功能
// 2.1 给添加按钮注册点击事件
// 2.2 获取到 输入框的值
// 2.3 校验
// 2.4 发送ajax请求，进行添加
// 2.5 ?????
$(function () {
  $('#btnAdd').on('click', function () {
    // 书名
    let bookname = $('#iptBookname').val().trim()
    // 作者
    let author = $('#iptAuthor').val().trim()
    // 出版社
    let publisher = $('#iptPublisher').val().trim()
    if (!bookname || !author || !publisher) {
      return alert('请输入信息')
    }
    // 发送ajax请求
    const xhr = new XMLHttpRequest()

    xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook')
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
    xhr.send(`bookname=${bookname}&author=${author}&publisher=${publisher}`)
    xhr.onload = function () {
      const res = JSON.parse(xhr.responseText)
      if (res.status === 201) {
        render()
        // 清空内容
        $('#iptBookname').val('')
        $('#iptAuthor').val('')
        $('#iptPublisher').val('')
      } else {
        alert(res.msg)
      }
    }
  })
})

// 3. 删除书籍
// 3.1 给删除按钮注册点击事件
// 3.2 点击的时候需要获取到书籍的id
// 3.3 发送ajax请求删除书籍
// 3.4 重新渲染
$(function () {
  $('#tb').on('click', '.delete', function () {
    // console.log('呵呵')
    const id = $(this).data('id')
    // co
    const xhr = new XMLHttpRequest()
    xhr.open('get', `http://www.liulongbin.top:3006/api/delbook?id=${id}`)
    xhr.send(null)
    xhr.onload = function () {
      const res = JSON.parse(xhr.responseText)
      if (res.status === 200) {
        // 删除成功
        alert('删除成功')
        render()
      } else {
        alert(res.msg)
      }
    }
  })
})
